import { extend, isObject } from "@vue/shared";
import { reactive, readonly } from "./reactive";

function createGetter(isReadonly = false, shallow = false) {

  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);
    
    if(!isReadonly) {
      // 收集依赖，数据变化更新视图
    }

    if (shallow) {
      return res;
    }

    // vue2 一上来就递归劫持数据，vue3 是当取值时才去劫持代理数据（懒代理）
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }

    return res;
  }
}

function createSetter(isReadonly = false){
  return function set(target, key, value, receiver) {
    const res = Reflect.set(target, key, value, receiver);
    return res;
  }
}

const get = createGetter();
const shallowGet = createGetter(false, true);
const readonlyGet = createGetter(true);
const showllReadonlyGet = createGetter(true, true);

const set = createSetter();
const shallowSet = createSetter(true);

export const mutableHandlers = {
  get,
  set
};
export const shallowReactiveHandlers = {
  get: shallowGet,
  set: shallowSet
};

const readonlyObj = {
  set: (target, key) => {
    console.log(`set on property ${key} falied`);
  }
}
export const readonlyHandlers = extend({
  get: readonlyGet
}, readonlyObj);
export const shallowReadonlyHandlers = extend({
  get: showllReadonlyGet
}, readonlyObj);